<template>

    <TopNav />

    <div class="main_wrap">
        <div class="wrap">
            <div class="left">
                <div class="left_container">
                    <div class="top_wrap">
                        <div class="top">
                            <div class="row">
                                <div class="label">单号</div>
                                <div class="content">{{ prevRowData?.allocationNumber }}</div>
                            </div>
                            <div class="row">
                                <div class="label">调入店铺</div>
                                <MyInput @click="onShopClick" placeholder="请选择店铺" :innerText="currentShop.name"
                                    style="box-shadow: 0 0 0 1px var(--el-color-info) inset;width: 50%;" />
                            </div>
                        </div>
                        <div class="btns">
                            <el-button type="danger" size="large" :disabled="!currentRow"
                                @click="delRow">删除行</el-button>
                            <el-button type="primary" size="large" :disabled="currentTransferPageNo == 1"
                                @click="currentTransferPageNo--">上页</el-button>
                            <el-button type="primary" size="large"
                                :disabled="currentTransferPageNo >= Math.ceil(transferTableData.length / transferPageSize)"
                                @click="currentTransferPageNo++">下页</el-button>
                        </div>
                    </div>
                    <div class="table_wrap" ref="transferTableRef">
                        <!-- :header-cell-style="{ backgroundColor: 'var(--el-color-primary)', color: '#fff' }" -->
                        <el-table stripe :data="currentTableData" ref="singleTableRef"
                            @current-change="handleCurrentChange" highlight-current-row class-name="my_table">
                            <el-table-column type="index" label="序" :index="indexMethod" width="50" />
                            <el-table-column prop="goodsName" label="商品" />
                            <el-table-column label="数/重量" align="center">
                                <template #default="scope">
                                   
                                    <MyInputNumber :isShowControls="scope.row.isQuantityUnit == 'y' || scope.row.isQuantityUnit =='1'"
                                        @inputCount="handleMyInputCount(scope.row)" :count="scope.row.num"
                                        @minus="handleMyInputMinus(scope.row)" @plus="handleMyInputPlus(scope.row)" />
                                </template>
                            </el-table-column>

                        </el-table>
                    </div>
                    <div class="bottom_btns_group">
                        <el-button type="danger" size="large" @click="beforeDel" v-if="prevRowData?.id">删除</el-button>
                        <el-button type="success" size="large" @click="save">保存</el-button>
                        <el-button type="primary" size="large" @click="submit">提交</el-button>
                    </div>

                </div>

            </div>
            <div class="right">
                <div class="right_top">
                    <MyInput @click="showSearchKeyboard" placeholder="请输入商品首字母搜索" :innerText="goodsSearchKeywords"
                        class="item" style="width: 100%;" />

                    <WeightAndTare />
                </div>
                <div class="goods_group">
                   
                   <el-button @click="prevGroup" :disabled="currentActiveGroupPageNo <= 1"
                   v-show="currentActiveGroupPageNo > 1"  class="page_btn prev" :icon="ArrowLeftBold"></el-button>
                      
                       <div class="list">
                          
                           <el-button size="large" @click="changeGroup(item, index)"
                           :type="currentActiveGroupName == item ? 'primary' : ''"
                       v-for="(item, index) in currentActiveGroupPaginateData"><span
                           :class="{ active: currentActiveGroupName == item }" class="group_name">{{
                   item }}</span></el-button>
                       </div>
                   
                 

                   <el-button @click="nextGroup"
                       :disabled="currentActiveGroupPageNo >= Math.ceil(currentActiveGroupData.flat().length / currentActiveGroupPageSize)"
                       v-show="currentActiveGroupPageNo < Math.ceil(currentActiveGroupData.flat().length / currentActiveGroupPageSize)"
                       class="page_btn next" :icon="ArrowRightBold"></el-button>

               </div>

                <div class="goods_list" ref="goodsListWrapRef" v-if="currentPageData.length > 0">

                    <div v-for="(item) in currentPageData" @click="selectGoods(item)"
                        :class="{ active: currentSelectGoods.goodsID === item.goodsID }" class="item">
                        <div class="goods_name">{{ item.goodsName }}</div>
                        <div class="info"><span>库:{{ item.kucun }}</span> <span class="price">&yen;{{ item.retailPrice
                                }}/{{ item.saleUnit }}</span>

                        </div>
                    </div>

                    <el-button v-if="currentPageNo > 1" @click="currentPageNo--" style="height: 100%;">上一页</el-button>
                    <el-button type="primary" v-if="currentPageNo < totalPages" @click="currentPageNo++"
                        style="height: 100%;margin-left: 0;">下一页</el-button>

                </div>
                <div class="empty" v-else>
                    <el-empty description="未搜索到商品，请更换关键字或选择其它分组" />
                </div>
            </div>
         <!--打印wrap-->
         <div ref="domDiv" class="print_wrap" :style="{paddingLeft:paperLeft,paddingRight:paperRight}">
            <div class="title">调拨单[一手店]</div>
            <div>单号：{{ allocationNumber || prevRowData?.allocationNumber }}</div>
            <div>调出店铺：{{ shopInfo.shopName }}</div>
            <div>调入店铺：{{ currentShop.name }}</div>
            <div>创建人：{{ userInfo.user_name }}</div>
            <div>时间：{{ userStore.timeWithYearString }}</div>
            <div class="line"></div>
            <div class="flex">
                <div>商品/数(重)量</div>
                <div>单位</div>
            </div>
            <div class="item" v-for="item in transferTableData" :key="item.goodsID">
                <div>{{ item.goodsName }}</div>
                <div class="flex">
                    <div>{{ item.num }}</div>
                    <div>{{ item.saleUnit }}</div>
                </div>
            </div>
            <div class="line"></div>
            <div class="flex">
                <div>件数合计</div>
                <div>{{ totalQuantity }}</div>
            </div>

            <div class="margin_bottom_placeholder"></div>
        </div>
        </div>
        <!--数字键盘(输入数量、重量)-->
        <CountKeyboard class="shopsale_count_keyboard" :placeholder="`请输入${isShowPoint ? '重' : '数'}量`"
            v-model="isShowCountKeyboard" :isShowPoint="isShowPoint" keyboardContainerClass="shopsale_count_container"
            @onConfirm="onConfirmCountOrWeight" ref="shopSaleCountKeboardRef" :title="`${currentRow?.goodsName}`" />
        <!--搜索键盘-->
        <SearchKeyboard v-model="isShowSearchKeyboard" keyboardContainerClass="new_transfer_search_id"
            @onChange="onSearchKeyboardChange"></SearchKeyboard>
        <!--搜索键盘 选择店铺-->
        <SearchKeyboard v-model="isShowShopSearchKeyboard" keyboardContainerClass="new_transfer_shop_id"
            title="请输入店铺首字母查询更多店铺" @onChange="onShopSearchKeyboardChange">
            <CustomPaginate :list="filterShopList" @pageItemClick="chooseShop" style="margin-bottom: 5px;"/>
        </SearchKeyboard>

        <!--确认删除调拨单弹窗-->
        <el-dialog v-model="isShowDelOrderDialogVisible" :show-close="false" title="提示" width="600">
            <div style="margin-bottom:16px">
                确认删除该调拨单？
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button size="large" @click="isShowDelOrderDialogVisible = false">取消</el-button>
                    <el-button size="large" type="primary" @click="del">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!--确认删除行弹窗-->
        <el-dialog v-model="delRowDialogVisible" :show-close="false" title="确认删除？" width="600">
            <div style="margin-bottom:16px">
                {{ currentRow?.goodsName }}
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button size="large" @click="delRowDialogVisible = false">取消</el-button>
                    <el-button size="large" type="primary" @click="confirmDelRow">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang='ts'>

// @ts-nocheck
import NP from "number-precision";
import { ElMessage } from 'element-plus'
import { transferSave, transferSubmit, transferUpdate, delTransferOrder } from '@renderer/api/newtransfer'
import { getTransferDesc, backOrder, receiveOrder, withDrawOrder } from '@renderer/api/transferdesc'
import pinyin from "pinyin";
import domtoimage from 'dom-to-image'; //dom转图片
import { ref, computed, watch } from 'vue'
import { useUserStore } from '@renderer/store/user'
import { storeToRefs } from 'pinia'
import { ElTable } from 'element-plus'
import { Avatar, Search, ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
import { paginateData } from '@renderer/utils'
import CustomPaginate from '@renderer/components/CustomPaginate.vue'
import CountKeyboard from '@renderer/components/CountKeyboard.vue'
import MyInputNumber from '@renderer/components/MyInputNumber.vue'
import WeightAndTare from '@renderer/components/WeightAndTare.vue'
import SearchKeyboard from '@renderer/components/SearchKeyboard.vue'
import { onMounted, onActivated } from 'vue';
import SvgIcon from '@renderer/components/SvgIcon.vue';
import { useRoute, useRouter } from 'vue-router';
//商品分组
const currentActiveGroupPageNo = ref(1)
const currentActiveGroupPageSize = ref(10)
const currentActiveGroupData = computed(()=>{
    return paginateData(currentPriceTypeGoodsData.value.map(data => data.panelType), currentActiveGroupPageSize.value) || []
    
})
const currentActiveGroupPaginateData = computed(()=>{
 return currentActiveGroupData.value[currentActiveGroupPageNo.value-1] 
    
})

//商品分组上一页下一页
function prevGroup(){
   
    currentActiveGroupPageNo.value--
}
function nextGroup(){
    
    currentActiveGroupPageNo.value++
   }
const route = useRoute()
const router = useRouter()
//上一页的行数据
const prevRowData = ref(null)
const currentShop = ref({ name: '请选择店铺' })
const isShowShopSearchKeyboard = ref(false)
const isShowCountKeyboard = ref(false) //是否显示数字键盘
const shopKeywords = ref('') //搜索店铺关键字
const isShowDelOrderDialogVisible = ref(false)
if (route.query.row) {
    prevRowData.value = JSON.parse(route.query.row)
    currentShop.value = { id: prevRowData.value.enterShopID, name: prevRowData.value.enterShopName }
}
const isShowPoint = ref(true) //是否显示键盘小数点
const goodsSearchKeywords = ref('')
const userStore = useUserStore()
const currentPriceType = ref('RP') //价格类型默认零售价
const pageSize = ref(30)  //分页页码
const currentPageNo = ref(1) //当前页
const goodsListWrapRef = ref()
const currentSelectGoods = ref({}) //当前选中商品
//左侧table 数据
const transferTableRef = ref()
const transferTableData = ref([])
const transferPageSize = ref(4)
const currentTransferPageNo = ref(1)

const isShowSearchKeyboard = ref(false)

const { userInfo, shopInfo, shopList, weight, allData, currentTime,paperLeft,paperRight } = storeToRefs(userStore)
const allGoodsData = computed(() => allData.value.goodsInfos)
// console.log(allGoodsData)
const delRowDialogVisible = ref(false) //删除行 弹窗

//打印相关
const allocationNumber = ref('')
let domDiv = ref()

onMounted(async () => {
    let tableHeight = transferTableRef.value.offsetHeight
    let singleRowHeight = 41 //每行高度
    transferPageSize.value = Math.floor((tableHeight - 40) / singleRowHeight) //减去header 的高度
   // console.log(transferPageSize.value)

    const saleOrganizationID = userInfo.value.user_organizationId
    const id = prevRowData.value?.id || ''
    const shopID = shopInfo.value.shopID
    if (id) {
        try {
            const { data } = await getTransferDesc(saleOrganizationID, id, shopID)
        transferTableData.value = data.map(item => {
            return {
                ...item,
                num: item.allocateQuantity,
                goodsPrice: item.retailPrice,
                buyingGoodsPrice: item.buyingPrice
            }
        })           
        } catch (error) {
            console.log(error)
        }

    } else {
        isShowShopSearchKeyboard.value = true
    }

})



const currentPriceTypeGoodsData = computed(() => { //当前价格类型商品数据
    if(!allGoodsData.value){
        return []
    }else{
        return allGoodsData.value.find(item => item.priceType === currentPriceType.value)?.posSalePanelGoodsVos || []
    }
})

const currentActiveGroupName = ref('全部') //当前选中分组名
const currentActiveGroupIndex = ref(0) //当前选中分组索引
function changeGroup(item, index) { //切换分组
    currentPageNo.value = 1
    currentActiveGroupName.value = item
}


const totalPages = computed(() => {
    const index = currentPriceTypeGoodsData.value.findIndex(item=>item.panelType ==currentActiveGroupName.value)
    return Math.ceil((currentPriceTypeGoodsData.value[index].posSaleGoodsPriceVos
        .filter(item => {
            const pinyinItem = pinyin(item.goodsName, {
                style: pinyin.STYLE_FIRST_LETTER //首字母模式
            }).join('')
            return pinyinItem.indexOf(goodsSearchKeywords.value) != -1 && item.id!==shopInfo.value.shopID
        }).length - (pageSize.value - 1)) / (pageSize.value - 2)) + 1;
})

watch(() => goodsSearchKeywords.value, (_) => {
    currentPageNo.value = 1
})

//临时模拟库存数据
const tempData = [
    {
        goodsID: 60,
        kucun: 300
    },
    {
        goodsID: 63,
        kucun: 420
    },
]

//当前页数据
const currentPageData = computed(() => {
    // console.log(currentPriceTypeGoodsData.value)
    const activeGroupIndex = currentPriceTypeGoodsData.value.findIndex(item=>item.panelType===currentActiveGroupName.value)
    let items = (currentPriceTypeGoodsData.value[activeGroupIndex]?.posSaleGoodsPriceVos || [])
        .filter(item => {
            const pinyinItem = pinyin(item.goodsName, {
                style: pinyin.STYLE_FIRST_LETTER //首字母模式
            }).join('')
            return pinyinItem.indexOf(goodsSearchKeywords.value) != -1
        })
    const itemsPerPageFirstPage = pageSize.value - 1
    const itemsPerPageOtherPages = pageSize.value - 2

    let start, end;
    if (currentPageNo.value === 1) {
        start = 0;
        end = itemsPerPageFirstPage;
    } else if (currentPageNo.value === totalPages.value) {
        start = itemsPerPageFirstPage + (totalPages.value - 2) * itemsPerPageOtherPages;
        end = items.length;
    } else {
        start = itemsPerPageFirstPage + (currentPageNo.value - 2) * itemsPerPageOtherPages;
        end = start + itemsPerPageOtherPages;

    }

    // 分割商品列表
    const paginatedItems = items.slice(start, end)
    for (let i = 0; i < paginatedItems.length; i++) {
        for (let j = 0; j < tempData.length; j++) {
            if (paginatedItems[i].goodsID == tempData[j].goodsID) {
                paginatedItems[i].kucun = tempData[j].kucun
            }
        }
    }
    return paginatedItems
})
const currentRow = ref()
const singleTableRef = ref()
const handleCurrentChange = (val) => {
    currentRow.value = val
}

//当前左侧table数据
const currentTableData = computed(() => {
    return paginateData(transferTableData.value, transferPageSize.value)[currentTransferPageNo.value - 1]

})
//计算序号
function indexMethod(index) {
    return transferTableData.value.length - (currentTransferPageNo.value - 1) * transferPageSize.value - index
}
//选择商品
function selectGoods(goods) {
    currentSelectGoods.value = goods
    const { isQuantityUnit } = goods

    if (isQuantityUnit === 'y') { //数量单位 (选择相同商品 数量+1)
        const foundIndex = transferTableData.value.findIndex(item => item.goodsID === goods.goodsID)
        if (foundIndex == -1) {
            transferTableData.value.unshift({ ...goods, num: 1 })
        } else {
            const found = transferTableData.value[foundIndex]
            found.num = NP.plus(found.num, 1)
            //如果找到的商品不在当前页 ，则把它删除，然后添加到首位后重新分页
            if (!currentTableData.value.find(item => item.goodsID === goods.goodsID)) {
                transferTableData.value.splice(foundIndex, 1)
                transferTableData.value.unshift({ ...goods, num: found.num })
            }
        }

    } else { //重量单位 直接添加一条新的记录
        //临时设置weight.value 
        // weight.value = 10
        if (weight.value && weight.value * 1 > 0) { //重量避免id重复，在删除时无法确定唯一值，添加当前时间戳
            transferTableData.value.unshift({ ...goods, num: weight.value, currentTime: new Date().getTime() })
        } else {
            ElMessage({
                message: '当前重量不正确',
                type: 'warning',
            })
            return false
        }



    }



    isShowDelOrderDialogVisible
}
function showSearchKeyboard() {
    isShowSearchKeyboard.value = true
}

function onSearchKeyboardChange(val) {
    goodsSearchKeywords.value = val
}




//店铺列表
const filterShopList = computed(() => {
    return shopList.value.filter(item => {
        // console.log(item)
        const pinyinItem = pinyin(item.name, {
            style: pinyin.STYLE_FIRST_LETTER //首字母模式
        }).join('')
        return pinyinItem.indexOf(shopKeywords.value) != -1 && item.id!== shopInfo.value.shopID
    })
})
function onShopClick() {
    isShowShopSearchKeyboard.value = true
}
function onGoodsSearchKeyboardChange(val) {
    goodsKeywords.value = val
}
function chooseShop(item) {
    currentShop.value = item
    shopKeywords.value = ''
    isShowShopSearchKeyboard.value = false
}
function onShopSearchKeyboardChange(val) {
    shopKeywords.value = val
}

//删除
function beforeDel() {
    isShowDelOrderDialogVisible.value = true
}
async function del() {
    const id = prevRowData.value.id
    const saleOrganizationID = userInfo.value.user_organizationId
    try {
        const { msg } = await delTransferOrder(saleOrganizationID,id)
    ElMessage({
        message: msg,
        type: 'success',
    })
    router.back()        
    } catch (error) {
        console.log(error)
    }

}

//保存
async function save() {
    const saleOrganizationID = userInfo.value.user_organizationId
    const outShopID = shopInfo.value.shopID
    const outShopName = shopInfo.value.shopName
    const enterShopID = currentShop.value.id
    const enterShopName = currentShop.value.name
    if (!enterShopID) {
        ElMessage({
            message: '请选择店铺',
            type: 'error',
        })
        return false
    }
    if (transferTableData.value.length <= 0) {
        ElMessage({
            message: '请选择商品',
            type: 'error',
        })
        return false
    }
    const allocateGoodsCreateDtoList = transferTableData.value.map(item => {
        return {
            goodsID: item.goodsID,
            goodsName: item.goodsName,
            goodsCode: item.goodsCode,
            allocateQuantity: item.num,
            saleUnit: item.saleUnit

        }
    })
    if (!prevRowData.value) { //新建调拨单保存 
        try {
            const { msg } = await transferSave({ saleOrganizationID, outShopID, outShopName, enterShopID, enterShopName, allocateGoodsCreateDtoList })
        ElMessage({
            message: msg,
            type: 'success',
        })
        router.back()  
        } catch (error) {
            console.log(error)
        }


    } else { //已有调拨单保存
        const modifyTags = '0'
        const id = prevRowData.value.id
        try {
            const { msg } = await transferUpdate({ saleOrganizationID, outShopID, outShopName, enterShopID, enterShopName, allocateGoodsCreateDtoList, modifyTags, id })
        ElMessage({
            message: msg,
            type: 'success',
        })
        router.back()
        } catch (error) {
            console.log(error)
        }

    }


}

//提交
async function submit() {
    const saleOrganizationID = userInfo.value.user_organizationId
    const outShopID = shopInfo.value.shopID
    const outShopName = shopInfo.value.shopName
    const enterShopID = currentShop.value.id
    const enterShopName = currentShop.value.name
    if (!enterShopID) {
        ElMessage({
            message: '请选择店铺',
            type: 'error',
        })
        return false
    }
    if (transferTableData.value.length <= 0) {
        ElMessage({
            message: '请选择商品',
            type: 'error',
        })
        return false
    }
    const allocateGoodsCreateDtoList = transferTableData.value.map(item => {
        return {
            goodsID: item.goodsID,
            goodsName: item.goodsName,
            goodsCode: item.goodsCode,
            allocateQuantity: item.num,
            saleUnit: item.saleUnit,
            retailPrice: item.goodsPrice,
            buyingPrice: item.buyingGoodsPrice
        }
    })
    if (!prevRowData.value) { //新建调拨单提交
        try {
            const { data, msg } = await transferSubmit({ saleOrganizationID, outShopID, outShopName, enterShopID, enterShopName, allocateGoodsCreateDtoList })
        allocationNumber.value = data
        printTicket()
        ElMessage({
            message: msg,
            type: 'success',
        })
       // 
        } catch (error) {
            console.log(error)
        }


    } else { //已有调拨单提交
        const modifyTags = '1'
        const id = prevRowData.value.id
        try {
            const { msg } = await transferUpdate({ saleOrganizationID, outShopID, outShopName, enterShopID, enterShopName, allocateGoodsCreateDtoList, modifyTags, id })
        ElMessage({
            message: msg,
            type: 'success',
        })
        printTicket()
        } catch (error) {
            console.log(error)
        }

    }
}
//dom-to-image
function getDomToImg(node) {
    // console.log(node)
    domtoimage.toPng(node)
        .then(function (dataUrl) {
            //console.log(dataUrl)
            const base64ImageData = dataUrl.replace(/^data:image\/png;base64,/, '');
            window.electron.ipcRenderer.send('base64ImageData', { data: base64ImageData })
            router.back() //这里一点打印完返回 否则会导致生成不了打印图片
        })
        .catch(function (error) {
            console.error('oops, something went wrong!', error);
        });


       
}
//打印小票
async function printTicket() {

    getDomToImg(domDiv.value)

}
//
//加
function handleMyInputPlus(row) {
    row.num++

}
//减
function handleMyInputMinus(row) {
    if (row.num == 1) {
        currentRow.value = row
        delRowDialogVisible.value = true

    } else {
        row.num--
    }

}
//输入
function handleMyInputCount(row) {
    const { isQuantityUnit } = row
    if (isQuantityUnit === 'y') {//数量单位
        isShowPoint.value = false
    } else {
        isShowPoint.value = true
    }
    currentRow.value = row
    isShowCountKeyboard.value = true
}
//确定数量或重量
function onConfirmCountOrWeight(val) {

    currentRow.value.num = val
    isShowCountKeyboard.value = false
}

//删除行
function delRow() {
    delRowDialogVisible.value = true
}
function confirmDelRow() {
    const isQuantityUnit = currentRow.value.isQuantityUnit


    if (isQuantityUnit === 'y') { //数量单位
        const index = transferTableData.value.findIndex(item => item.goodsID === currentRow.value.goodsID)
        transferTableData.value.splice(index, 1)
    } else { //重量单位还需要判断 currentTime 来确定唯一值
        const index = transferTableData.value.findIndex(item => item.goodsID === currentRow.value.goodsID && item.currentTime === currentRow.value.currentTime)
        transferTableData.value.splice(index, 1)
    }

    delRowDialogVisible.value = false
}


//件数合计
const totalQuantity = computed(() => {
    let total = 0
    for (let i = 0; i < transferTableData.value.length; i++) {
        if (transferTableData.value[i].isQuantityUnit === 'y') {
            total += transferTableData.value[i].num * 1
        } else {
            total += 1
        }
    }
    return total

})

</script>


<style scoped lang='scss'>
.wrap {
    display: flex;
    height: 100%;
    box-sizing: border-box;
    background-color: var(--ev-c-white);
    border-radius: 10px;
    position: relative;
    overflow: hidden;

    .left {
        width: 30%;
        box-sizing: border-box;
        // padding: 0 10px;

        .left_container {
            // border-right: 1px solid #ccc;
            height: 100%;
            box-sizing: border-box;
            position: relative;


            border-radius: 8px;
            overflow: hidden;

            .top_wrap {
                .top {
                    background-color: var(--el-color-primary-light-7);
                    margin-bottom: 5px;
                    border-radius: 8px;
                    overflow: hidden;

                    .row {
                        display: flex;
                        align-items: center;
                        height: 50px;
                        line-height: 40px;
                        border-bottom: 1px solid #fff;
                        box-sizing: border-box;
                        padding: 5px 0;
                        text-indent: 5px;

                        .label {
                            width: 33%;
                        }
                    }



                }

                .btns {
                    display: flex;
                    justify-content: space-between;
                    background-color: #fff;
                    margin-bottom: 5px;
                    padding-left: 5px;

                    :deep(.el-button) {
                        width: 33%;
                    }
                }
            }



            .table_wrap {
                margin-left: 5px;
                margin-bottom: 10px;
                height: calc(100% - 150px - 55px);
                border: 1px solid var(--el-border-color);
                border-bottom: 0;
                box-sizing: border-box;

                .my_table {
                    width: 100%;
                    height: 100%;
                }


            }

            .bottom_btns_group {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-left: 5px;
                padding-bottom: 5px;

                :deep(.el-button) {
                    // width: 49% !important;
                    flex: 1;

                }

                :deep(.el-button+.el-button) {
                    margin-left: 5px;

                }
            }

            .left_bottom {
                width: 100%;
                position: absolute;
                left: 0;
                bottom: 0px;

                .total_price {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 10px 0 10px 5px;
                    // border-bottom: 1px solid #ccc;
                    // border-top: 1px solid #ccc;
                }

                .varible_container {
                    display: flex;
                    border-top: 1px solid var(--el-color-primary);

                    .item {
                        flex: 1;
                        line-height: 40px;
                        height: 40px;
                        text-align: center;
                        border-right: 1px solid var(--el-color-primary);

                        // &:last-child{
                        //     border-right: none;
                        // }
                        &.active {
                            background-color: var(--el-color-primary);
                            color: #fff;
                        }

                    }

                }
            }
        }

    }

    .right {
        width: calc(70% - 5px);
        padding: 5px 0 0 5px;

        box-sizing: border-box;

        .right_top {
            display: grid;
            // align-items: center;
            margin-bottom: 5px;
            grid-template-columns: 3fr 2fr 2fr;
            gap: 5px;

            .item {
                line-height: 40px;
                height: 40px;

                span {
                    font-size: 20px;
                }

                .num {
                    color: var(--el-color-danger);

                }
            }
        }

        .goods_group {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 5px;
            .page_btn{
                height:85px;
                width: 46px;
                &.prev{
                    margin-right: 4px;
                }
                &.next{
                    margin-left:4px;
                }
            }
            .list{
           flex: 1;
            display: grid;
            gap: 5px;
            grid-template-rows: repeat(2, 1fr);
            grid-template-columns: repeat(5, minmax(100px,1fr));

            .group_name {
                color: #000;
                font-size: 16px;
            }

            .active {
                color: #fff;
            }

            :deep(.el-button) {
                // border-radius: 0;
                // border: none;
                white-space: break-spaces;
            }

            :deep(.el-button+.el-button) {
                margin-left: 0;

            }
           }
        }

        .goods_list {
            height: calc(100% - 45px - 90px);
            padding: 2px;
            overflow: hidden;
            box-sizing: border-box;
            display: grid;
            gap: 2px;
            grid-template-rows: repeat(6, 1fr);
            grid-template-columns: repeat(5, 1fr);
            background-color: var(--el-color-primary);

            .item {
                text-indent: 5px;
                background-color: var(--ev-c-white);
                box-sizing: border-box;
                // border: 1px solid #ccc;
                // border-radius: 2px;
                padding: 2px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .goods_name {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;

                }

                .info {
                    font-size: 12px;
                    text-align: right;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .price {
                        color: var(--el-color-danger);
                        font-weight: bold;
                    }
                }

                &.active {
                    background-color: var(--el-color-primary-light-7);
                }
            }

        }

        .empty {
            height: calc(100% - 45px - 90px);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}

.recharge_dialog {

    //充值活动
    .activity_list {
        display: grid;
        flex-wrap: wrap;
        margin-bottom: 10px;
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;

        .item {

            padding: 10px;
            border: 1px solid #ccc;

            .capital {
                font-size: 16px;
            }

            .desc {
                color: var(--el-color-info);
            }
        }

        .active {
            background-color: var(--el-color-primary);
            color: #fff;
            font-weight: bold;

            .desc {
                color: #fff;
            }
        }


    }

    .pay_type {
        display: flex;

        :deep(.el-button) {
            flex: 1;
        }
    }
}

//打印相关
.print_wrap {
    .title {
        text-align: center;
        line-height: 1.5;
        font-size: 38px;
    }

    background-color: #fff;
    color: #000;
    width:800px; //这里一定设置为800px 经过测试后的合适距离
    
    box-sizing:border-box;
    // font-weight: bold;
    font-size:36px;
    position: absolute;
    top: 0;
    left:0;
    z-index: -10;

    .line {
        width: 100%;
        border-top: 1px dashed #000;
        height: 1px;
        margin: 15px 0;
    }

    .margin_bottom_placeholder {
        //这里使用空div 站位 下边距
        width: 100%;
        height: 400px;

    }

    .flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }


}


</style>